import React, { Component } from 'react';
import { inject, observer } from 'mobx-react'

@inject('data')
@observer
class AppleStats extends Component {
    render() {
      /**
       * pluckAppleList 当前苹果列表
       * eatedAppleList 已吃苹果列表
       * getPluckWeight 计算属性，计算当前苹果列表总重量
       * getEatedWeight 计算属性，计算已吃苹果列表总重量
       */
      const { pluckAppleList, eatedAppleList, getPluckWeight, getEatedWeight } = this.props.data
      return (
        <div className="stats">
            <div className="section">
                <div className="head">当前</div>
                <div className="content">
                  { pluckAppleList.length }个苹果，{ getPluckWeight }克
                </div>
            </div>
            <div className="section">
                <div className="head">已吃掉</div>
                <div className="content">
                  { eatedAppleList.length }个苹果，{ getEatedWeight }克
                </div>
            </div>
        </div>
      )
    }
}
  
export default AppleStats;